import React, { PureComponent } from 'react'
import { withRouter } from 'react-router'
import PropTypes from 'prop-types'
import ResponsiveImage from '@/components/ResponsiveImage'
import { formatNumber } from '@/utils'
import css from './index.module.scss'
class BangumiCover extends PureComponent {
    static propTypes = {
        id: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number
        ]),
        direction: PropTypes.string,
        cover: PropTypes.string,
        title: PropTypes.string,
        play: PropTypes.number,
        follow: PropTypes.number
    }

    static defaultProps = {
        direction: 'horizontal'
    }

    state = {
        directions: ['horizontal', 'vertical']
    }

    get dir() {
        const item = this.props.direction
        const arr = this.state.directions
        const match = arr.includes(item)
        if (match) {
            return item
        } else {
            return arr[0]
        }
    }

    handleDetail = () => {
        this.props.history.push(`/bangumi/ss${this.props.id}`)
    }

    render() {
        const { cover, title, play, follow, className } = this.props
        if (this.dir === 'vertical') {
            // 垂直方向排列
            return (
                <div className={`${css["wrap"]} ${className ? className : ''}`} onClick={this.handleDetail}>               
                    <ResponsiveImage 
                        className={css['cover']} 
                        src={cover}
                    >
                        <div className={css['count']}>
                            <span>{formatNumber(play)}次观看</span>
                            <span>{formatNumber(follow)}人追番</span>
                        </div>
                    </ResponsiveImage>
                    <div className={css['title']} dangerouslySetInnerHTML={{__html: title}}></div>
                </div>
            )
        } else {
            // 水平方向排列
            return (
                <div className={`${css['wrap-horizontal']} ${className ? className : ''}`} onClick={this.handleDetail}>
                    <div className={css['cover']}>
                        <ResponsiveImage src={cover} />                        
                    </div>
                    <div className={css["content"]}>
                        <div className={css["title"]} dangerouslySetInnerHTML={{__html: title}}></div>                        
                        <div className={css["count"]}>
                            <span>{formatNumber(play)}次观看</span>
                            <span>{formatNumber(follow)}人追番</span>
                        </div>
                    </div>
                </div>
            )
        }        
    }
}

export default withRouter(BangumiCover)